<template>
  <div class="com-card">
    <el-collapse v-model="activeName">
      <el-collapse-item name="1">
        <template slot="title">
          <div class="card_header"><div class="title">{{ title }}</div><i class="iconfont icon-a-tianxiequerenConfirmthefilling" :red="!isFilled" :blue="isFilled"></i><span :red="!isFilled" :blue="isFilled">{{ isFilled ? '已' : '未' }}填写</span></div>
        </template>

        <slot></slot>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  name: "ComCollapse",
  props: {
    title: {
      type: String,
      default: ''
    },
    isFilled: { // 表已天下-未填写, 默认已填写
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      activeName: '1'
    };
  },
  methods: {
    
  },
  created() {
    
  },
};
</script>

<style lang="scss" scoped>
.el-collapse-item{
  :deep(.el-collapse-item__header){
    height: 60px;
    padding: 0 30px;
    border-bottom: 1px solid #EBEDF0;
    .card_header{
      position: relative;
      flex: 1;
      display: flex;
      align-items: center;
      padding-right: 6px;
      padding-left: 16px;
      .title{
        font-size: 16px;
        font-weight: bold;
        color: #222;
      }
      i{
        margin: 0 10px 0 20px;
      }
      span{
        flex: 1;
        font-size: 14px;
      }
      &:before{
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 5px;
        height: 16px;
        background: #1B62FF;
        border-radius: 0 4px 4px 0;
      }
      &:after{
        content: '展开';
        font-size: 14px;
      }
    }
  }
  &.is-active{
    .card_header:after{
      content: '收起';
    }
  }
  :deep(.el-collapse-item__arrow){
    transform: rotate(90deg);
    &.is-active{
      transform: rotate(-90deg);
    }
  }
  :deep(.el-collapse-item__content){
    padding: 20px 30px 0;
  }
}
</style>
